<template>
    <div>
        <div class="header">
            <div v-for="(item, index) in list" :key="index" class="headList">
                <img v-if="flag" :src="item.img" alt="" />
                <div>
                    <p>{{ item.name }}</p>
                    <span>{{ item.val }}</span>
                </div>
            </div>
        </div>
        <Charts v-if="flag" :options="options" />
    </div>
</template>

<script>
import Charts from "@/components/Charts.vue";
import { totalData } from "@/apis/order.js";
export default {
    components: {
        Charts,
    },
    data() {
        return {
            flag: false,
            list: [
                {
                    img: require("@/assets/imges/home_icon01.png"),
                    name: "总订单",
                    val: 102400,
                },
                {
                    img: require("@/assets/imges/home_icon02.png"),
                    name: "总销售额",
                    val: 102400,
                },
                {
                    img: require("@/assets/imges/home_icon03.png"),
                    name: "今日订单数",
                    val: 102400,
                },
                {
                    img: require("@/assets/imges/home_icon04.png"),
                    name: "今日销售额",
                    val: 102400,
                },
            ],
            options: {
                title: "统计数据",
                legend: ["金额", "订单数量"],
                xData: [],
                orderData: [],
                priceData: [],
            },
            
        };
    },

    async created() {
        this.flag = false;
        let {
            totalOrder,
            totalAmount,
            todayOrder,
            totayAmount,

            xData,
            orderData,
            amountData,
        } = await totalData();

        let arr = [totalOrder, totalAmount, todayOrder, totayAmount];
        arr.forEach((item, i) => {
            this.list[i].val = item;
        });
        this.options.xData = xData;
        this.options.orderData = orderData;
        this.options.priceData = amountData;
        this.flag = true;
    },
};
</script>

<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    .headList {
        width: 24%;
        height: 100px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
            padding: 0 30px;
            width: 60px;
            height: 60px;
        }
        div {
            padding: 0 50px;
            text-align: center;
            p {
                line-height: 30px;
                color: #d5d5d5;
            }
        }
    }
}
#myCharts {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}
</style>